/*  Classes for dropdown display */
  .dropdown {
  position: relative;
  display: inline-block;
} 

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/*  Basic layering of the text : titles in bold, articles not wider than an A4 sheet */
PREAMBLE {
    display:none
}

TITLE {
    display:block;
    padding-left:10px;
    padding-top:20px;
    color:blue;
    font-weight:bold;
    font-size:large;
}

ARTICLE {
    display:block;
    padding-left:20px;
    padding-top:10px;
    max-width:21cm;
}

TI\.ART, STI\.ART {
    font-weight:bold;
}


PARAG, ARTICLE>ALINEA, LIST>ITEM {
    display:block;
    padding-left:10px;
}

/*  Annotated fragments and entities are in grey */
OBLIGATION, PERMISSION, PROHIBITION, RIGHT, DEFINITION, POWER, QUALITY_ATTRIBUTION, EXCEPTION, LEGAL_PRECISION{
    color:gray
}

CONCEPT, PERSON, LEGAL_ENTITY{
    color:gray ;
    border-bottom:thin dashed
}

/*CONCEPT::before{
    content:<span class=\"dropdown\"><span class=\"dropdown-content\"> "[CONCEPT " attr(ref) "]</span></span>"
}*/

/* Colors of the fragments appear when the mouse is over them. I did'nt want more than 4 colours */
OBLIGATION:hover, PERMISSION:hover, PROHIBITION:hover, RIGHT:hover{
    color:fuchsia;
}

DEFINITION:hover, POWER:hover, QUALITY_ATTRIBUTION:hover{
    color:brown
}

EXCEPTION:hover,LEGAL_PRECISION:hover{
    color:rgb(255,128,0); /* a.k.o. orange */
}

EXCEPT:hover{
    color:green;
}

/* The annotation appears in red before each fragment when it is hovered */

*:hover::before{
    color:red
}

OBLIGATION:hover::before{
    content:"[OBLIGATION] "
}

PERMISSION:hover::before{
    content:"[PERMISSION] "
}

PROHIBITION:hover::before{
    content:"[PROHIBITION] "
}

RIGHT:hover::before{
    content:"[RIGHT] "
}

DEFINITION:hover::before{
    content:"[DEFINITION] "
}

POWER:hover::before{
    content:"[POWER " attr(type) "] "
}

QUALITY_ATTRIBUTION:hover::before{
   content:"[QUALITY_ATTRIBUTION " attr(type) "] "
}


EXCEPTION:hover::before{
    content:"[EXCEPTION] "
}

LEGAL_PRECISION:hover::before{
    content:"[LEGAL_PRECISION " attr(type) "] "
}

EXCEPT:hover::before{
    content:"[EXCEPT] "
}

/* And for entities */

CONCEPT:hover::before{
    content:"[CONCEPT " attr(ref) "]"
}

PERSON:hover::before{
    content:"[PERSON " attr(ref) "]"
}

LEGAL_ENTITY:hover::before{
    content:"[LEGAL_ENTITY " attr(ref) "]"
}